<!--登陆界面-->
<template>
  <div class="login" style="flex-wrap: nowrap">
    <div class="banner-frame" v-if="!isMobile">
      <van-image
        fit="cover"
        class="img"
        lazy-load
        :src="require('@/assets/imgs/login-banner.png')"
      />
    </div>
    <div class="login-frame">
      <div class="login-panel">
        <div class="title-frame">
          <p class="welcome">Welcome back</p>
          <br />
          <p class="title">SIGN IN TO YOUR ACCOUNT</p>
          <br />
          <p class="fogert">
            Dont't Have An Account?
            <span class="href" @click="clickSignup">Sign up</span>
          </p>
        </div>
        <div class="input-frame">
          <div class="input-panel">
            <p class="input-label">Email:<span class="must">*</span></p>
            <input v-model="form.username" class="input-in" />
          </div>
          <div class="input-panel">
            <p class="input-label">Password:<span class="must">*</span></p>
            <input v-model="form.password" type="password" class="input-in" />
          </div>
          <div class="input-panel">
            <p class="input-label">
              Verification code:<span class="must">*</span>
            </p>
            <div class="code-input">
              <input
                class="input-in"
                placeholder="Please Check The Code In The Emaill"
                v-model="form.code"
              />
              <div class="code-frame">
                <img
                  class="code-img"
                  :src="codeUrl"
                  alt="code"
                  v-if="!codeLoading"
                />
                <van-icon
                  @click="updateCode"
                  class="refre"
                  v-if="!codeLoading"
                  name="replay"
                />
                <van-loading v-else size="1rem" color="#1989fa" />
              </div>
            </div>
          </div>
        </div>
        <div class="btn-frame" @click="clickLogin">
          <span>SIGN IN</span>
        </div>
        <div class="tips-frame">
          <span @click="clickTips" class="href">Forget the password</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
        code: "",
      },
      codeUrl: "",
      codeLoading: true,
      login: {
        label: "login",
        loading: false,
      },
    };
  },
  computed: {
    isMobile() {
      return this.$store.state.isMobile;
    },
  },
  activated() {
    this.updateCode();
  },
  mounted() {
    let err = this.$route.query.err == undefined ? "" : this.$route.query.err;
    if (err == "loginFail") {
      this.$toast.fail(
        "The current login identity is invalid, please login again"
      );
    }
  },
  methods: {
    //点击登陆
    clickLogin() {
      if (this.form.username == "") {
        this.$toast("Please fill in the email");
      } else if (this.form.password == "") {
        this.$toast("Please fill in the password");
      } else if (this.form.code == "") {
        this.$toast("Please enter the verification code");
      } else {
        this.tips.startLoadingToast();
        this.$store
          .dispatch("user/login", this.form)
          .then((res) => {
            this.tips.closeToast();
            const { code, data, msg } = res;
            // 登录成功
            if (code === 0) {
              let redirect = this.$route.query.redirect;
              localStorage.setItem("userInfo", JSON.stringify(data));
              this.$store.commit("user/setUserInfo", data); //保存登陆信息
              this.$store.commit("user/setIsLogin", true); //更改登陆状态：登录
              localStorage.setItem("invitaCode", data.invite_code); //保存邀请码
              this.$toast("Successful login");
              //路由重写
              if (redirect != undefined && redirect != "/") {
                this.$router.replace({
                  path: decodeURIComponent(redirect),
                });
              } else {
                //跳转首页
                this.$router.replace({
                  path: "/",
                });
              }
            } else {
              this.$toast.fail(msg);
              this.updateCode();
            }
          })
          .catch((err) => {
            this.tips.closeToast();
            this.updateCode();
          });
      }
    },
    //更换验证码
    updateCode() {
      this.codeLoading = true;
      this.form.code = "";
      this.codeUrl = `/api/home/auth/login-captcha?r=${Math.random()}`;
      // this.codeUrl = `${
      //   process.env.BASE_URL
      // }/api/home/auth/login-captcha?r=${Math.random()}`; //生产显示
      setTimeout(() => {
        this.codeLoading = false;
      }, 1000);
    },
    //点击注册
    clickSignup() {
      let redirect = this.$route.query.redirect;
      this.$router.replace({
        path: "/login/register",
        query: {
          redirect: redirect,
        },
      });
    },
    //点击提示,忘记密码
    clickTips() {
      this.$router.push({
        path: "/login/updatepassword",
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "login.less";
</style>